<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>地址添加</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		
		body {
			background-color: #FFFFFF;
			width: 100%;
			height: 100%;
		}
		.mui-content {
			width: 100%;
			height: 100%;
			background-color: #FFFFFF;
		    -webkit-overflow-scrolling: touch;
		}
		.input-div{
			width: 100%;
			background-color: #FFFFFF;
		}
		.item-div {
			margin-left: 14px;
			margin-right: 14px;
			height: 55px;
			position: relative;
		}
		.item-span {
			font-family: 'PingFangSC-Regular';
			font-size: 14px;
			color: #666666;
			line-height: 55px;
		}
		.item-icon {
			width: 20px;
			height: 20px;
			position: absolute;
			right: 0px;
			top: 22px;
		}
		input[type=text] {
			padding: 0px;
		    float: right;
    			width: 70%;
			margin-bottom: 0;
			height: 50px; 
			border-width: 0px;
			font-family: 'PingFangSC-Regular';
			font-size: 14px;
			color: #999999;
			background-color: transparent;
		}
		::-webkit-input-placeholder{
		     font-size: 14px;
		}
		.display {
			display: flex;
		}
		.right-div {
			display: inline-block;
			float: right;
		}
		.attr-span-ed {
			line-height: 55px;
		    color:#515151;
			font-size: 15px;
		}
		.choose-img {
			width: 14px;
			height: 3px;
		    margin-bottom: 3px;
		}
		.right-div-container {
			display: inline-block;
			float: right;
			width: 70%;
		}
		.right-div {
			display: inline-block;
			float: right;
		}
		.right-span {
			line-height: 55px;
			font-size: 14px;
			color: #999999;
			font-family: 'PingFangSC-Regular';
		}
		.choose-img {
			width: 24px;
			height: 24px;
			vertical-align: middle;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">地址添加</h1>
		</header>
		<div class="mui-content">
			<div class="input-div">
				<div class="item-div">
					<span class="item-span">联系人</span>
					<input type="text" id="name" placeholder="请输入联系人姓名"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">手机号码</span>
					<input type="text" id="phone" placeholder="请输入电话号码"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">邮箱</span>
					<input type="text" id="email" placeholder="请输入邮箱"/>
				</div>
				<div class="line-div"></div>
				<div id="cityChoose" class="item-div">
					<span class="item-span">户口所在地</span>
					<div id="showAgoAddrPicker" class="right-div-container">
						<span class="right-span" id="country">请选择省市区</span>
						<div class="right-div">
							<span class="right-span"></span>
							<img class="choose-img" src="../img/detail/down_icon.png" />
						</div>
					</div>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">详细地址</span>
					<input type="text" id="detailed" placeholder="请输入详细地址"/>
				</div>
				<div class="line-div"></div>
			</div>
			<div class="transaction-container"><button type="button">保存</button></div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/city.data-3.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript">
		"use strict";
		mui.init();
		var addrPicker = null;
		var customerId = base.getParameter("customerId");
		var addressId = base.getParameter("addressId");
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		(function($, doc) {
			$.init();
			$.ready(function() {
				if (addressId != "" && addressId != null) {
					getAddressInfo();
				}
				addrPicker = new $.PopPicker({
					layer: 3
				});
				addrPicker.setData(cityData3);
			});
		})(mui, document);
		function getAddressInfo () {
			var url = base.url.getAddressInfo;
			var data = {
				customerId: customerId,
				addressId: addressId
			}
			base.postData(url,data,getAddressInfoSuccess);
		}
		function getAddressInfoSuccess(data) {
			if (data.success) {
				var _address = data.extendData;
				$('#country').text(_address.provinceName+"-"+_address.cityName+"-"+_address.areaName);
				$("#name").val(_address.contactUser);
				$("#phone").val(_address.contactUserPhone);
				$("#detailed").val(_address.detailed);
				$("#email").val(_address.email);
			} else {
				mui.toast(data.message);
			}
		}
		$("#cityChoose").on("tap", "#showAgoAddrPicker", function() {
			document.activeElement.blur();
			addrPicker.show(function(items) {
				$("#country").attr("class", "attr-span-ed");
				var areaName = _getParam(items[0], 'text')  + "-" + _getParam(items[1], 'text')  + "-" + _getParam(items[2], 'text');
				$("#country").text(areaName);
				//返回 false 可以阻止选择框的关闭
				//return false;
			});
		})
		$(".transaction-container").on("tap", "button", function() {
			var tempAddr = $("#country").text();				
			if($("#name").val() == null || $("#name").val() == "") {
				mui.toast("收货人姓名不能为空");
	        		return;
	        }			
			if(!testPhone($("#phone").val())) {
				mui.toast("请输入正确的电话号码");
	        		return;
	        }
			if(!checkEmail($("#email").val())) {
				mui.toast("请输入正确的电话号码");
	        		return;
	        }
			if (tempAddr == '请选择省市区') {
				mui.toast("请选择地址");
	        		return;
			}
			if($("#detailed").val() == null || $("#detailed").val() == "") {
				mui.toast("详细地址不能为空");
	        		return;
	       	}
			document.activeElement.blur();
			var url = base.url.addAddressInfo;
			var params = {
				customerId: customerId,
				addressId: addressId,
				provinceName: tempAddr.split('-')[0],
				cityName: tempAddr.split('-')[1],
				areaName: tempAddr.split('-')[2],
				contactUser: $("#name").val(),
				contactUserPhone: $("#phone").val(),
				detailed: $("#detailed").val(),
				email: $("#email").val()
			}
			base.postData(url,params,saveAddressSuccess);
		})
		function saveAddressSuccess(data) {
			if (data.success) {
				mui.toast(data.message);
				setTimeout(function() {
					mui.back();
				}, 1000)
			} else {
				mui.toast(data.message);
			}
		}
	</script>
</html>